<template>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :data="data">
        <van-swipe-item>
            <img src="https://th.bing.com/th/id/R.54809bb710e55f4f787a9e042db4debc?rik=uiTRXiDLHbOsHA&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20180204%2fc3135ed6db4f4c049961bbb425ae7e4b.jpeg&ehk=Ld2p9QCZEs76gMEQhWn9J%2b6Pa0En87s%2bIkpB9wCNeNw%3d&risl=&pid=ImgRaw&r=0"
                alt="">
        </van-swipe-item>
        <van-swipe-item>
            <img src="https://th.bing.com/th/id/R.54809bb710e55f4f787a9e042db4debc?rik=uiTRXiDLHbOsHA&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20180204%2fc3135ed6db4f4c049961bbb425ae7e4b.jpeg&ehk=Ld2p9QCZEs76gMEQhWn9J%2b6Pa0En87s%2bIkpB9wCNeNw%3d&risl=&pid=ImgRaw&r=0"
                alt="">
        </van-swipe-item>
    </van-swipe>
</template>

<script setup>
import { defineProps } from 'vue'
defineProps({
    data: {
        type: Array,
        default: () => []
    }
})
</script>

<style lang="scss" scoped>
.my-swipe {
    width: 100%;
    height: 100%;
    // border-radius: 10px;
}

.van-swipe-item {
    color: #fff;

    :deep(img) {
        width: 690px;
        height: 400px;
        // object-fit: cover;
        border-radius: 2px;
    }
}
</style>